在React Native中可以利用StyleSheet做到跟web的css很像的格式設定，但各項格式設定的寫法React Native跟css還是不太一樣的，今天就來把常用的格式設定做個整理。
| React Native | css | 用途 |
|---|---|---|
| width | width | 設定元件寬度 |
| height | height | 設定元件高度 |
| backgroundColor | background-color | 設定背景顏色 |
| React Native | css | 用途 |
|---|---|---|
| border | border | 設定邊線格式 |
| borderWidth | border-width | 設定邊線寬度 |
| borderBottomWidth | border-bottom-width | 設定下方邊線寬度（上、左、右邊依此類推） |
| borderColor | border-color | 設定邊線顏色 |
| borderRadius | border-radius | 設定圓角 |
| React Native | css | 用途 |
|---|---|---|
| color | color | 設定文字顏色 |
| fontSize | font-size | 設定文字大小 |
| textAlign | text-align | 設定文字對齊 |
| lineHeight | line-height | 設定行高 |
| React Native | css | 用途 |
|---|---|---|
| shadowColor | box-shadow | 設定陰影顏色 |
| shadowOffset | box-shadow | 設定陰影位置 |
| shadowOpacity | box-shadow | 設定陰影透明度 |
| shadowRadius | border-radius | 設定陰影圓角 |
| React Native | css | 用途 |
|---|---|---|
| margin | margin | 設定外部間隔大小 |
| marginTop | margin-top | 設定上方外部間隔大小（左、右、下依此類推） |
| padding | padding | 設定內部間隔大小 |
| paddingTop | padding-top | 設定上方內部間隔大小 |
| justifyContent | justify-content | 設定水平的物件排列 |
| alignItems | align-items | 設定垂直的物件排列 |
| flexDirection | flex-direction | 設定彈性容器內元件垂直或水平排列 |
| elevation | z-index | 設定層級 |
&小提示1：在React Native中，任何有關於文字的樣式設定只能設定給<Text>標籤，設定給其他標籤例如<View>標籤是沒有作用的（網頁是可以設定給<div>的）。
&小提示2：在React Native中，標籤預設就是彈性容器，但與網頁的彈性容器不同的是React Native的彈性容器內元件預設為垂直方向排列，而網頁的預設則是水平的。
希望這篇彙整對大家有幫助～
iThome鐵人賽
看影片追技術